<template>
  <div>
    <Icon @click.native="handleChange" type="ios-search" :size="24" />
    <transition :name="transitionName">
      <AutoComplete
        id="complete"
        v-if="show"
        ref="auto"
        v-model="model"
        size="small"
        :data="data"
        placeholder="搜索页面"
        @on-search="handleSearch"
        @on-select="select"
        transfer
        style="width:200px;overflow: hidden">
      </AutoComplete>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Fullscreen',
  data () {
    return {
      show: false,
      model: '',
      data: []
    }
  },
  computed: {
    transitionName () {
      return this.show ? 'hide' : 'show'
    },
    menuList () {
      return this.$store.getters.menuList
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    turnTo (list, value) {
      list.forEach(item => {
        if (item.meta.title === value) {
          this.$nextTick(function () {
            this.model = ''
            const route = {
              name: item.name
            }
            this.$router.push(route)
          })
        }
        if (item.children !== undefined && item.children !== null) {
          this.turnTo(item.children, value)
        }
      })
    },
    filter (list, result, str) {
      list.forEach(item => {
        if (item.children !== undefined && item.children !== null) {
          this.filter(item.children, result, str)
        } else {
          if (item.meta.title.indexOf(str) !== -1) {
            result.push(item.meta.title)
          }
        }
      })
    },
    handleChange: function () {
      this.show = !this.show
      if (this.show) {
        this.$nextTick(function () {
          let elementById = document.getElementById('complete')
          let input = elementById.getElementsByClassName('ivu-input')
          input[0].focus()
          this.model = ''
        })
      }
    },
    select (value) {
      this.turnTo(this.menuList, value)
    },
    handleSearch (value) {
      let result = []
      this.filter(this.menuList, result, value)
      this.data = result
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
  /deep/ .ivu-input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /deep/ .ivu-input {
    border-radius: 0px;
    border-bottom: 1px solid #dcdee2;
    border-left: none;
    border-top: none;
    border-right: none;
  }

  .show-enter-active,
  .show-leave-active,
  .hide-enter-active,
  .hide-leave-active {
    will-change: transform;
    transition: all 100ms;
  }

  .show-enter {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  .show-leave-active {
    opacity: 0;
    transform: scale3d(1,1, 1);
  }

  .hide-enter {
    opacity: 0;
    transform: scale3d(0, 1, 1);
  }

  .hide-leave-active {
    opacity: 0;
    transform: scale3d(0, 1, 1);
  }

</style>
